<template>
  <div>
    <div class="header-box space-between">
      <w-logo></w-logo>
      <div class="right-box">
        <div class="total-container">
          <div class="item" v-for="item of totals" :key="item.icon">
            <el-badge :value="item.value" class="over-layer">
              <el-tooltip
                effect="dark"
                :content="`${item.message} ${item.value || 0} 个`"
                placement="bottom-start"
              >
                <div
                  class="img-box"
                  :class="item.value ? 'has-total' :'' "
                  @click="()=>item.onClick()">
                  <i :class="item.icon"></i>
                </div>
              </el-tooltip>
            </el-badge>
            <el-tooltip
              v-if="item.value"
              effect="dark"
              :content="`${item.message} ${item.value || 0} 个`"
              placement="bottom-start"
            >
              <div class="space-container" @click="()=>item.onClick()">
                <div class="spread spread-inner"></div>
                <div class="spread spread-inner-1"></div>
                <div class="spread spread-wrapper"></div>
              </div>
            </el-tooltip>
          </div>
        </div>
        <div class="img-box" style="margin: 0 10px"><i class="el-icon-user-solid"></i></div>
        <span class="txt-user" style="width: 100px">{{ username }}</span>
        <span class="txt-exit" @click="logout">退出</span>
      </div>
    </div>
    <w-dialog
      :visible.sync="visible"
      max-height="70vh"
      width="60%"
      title="被驳回任务列表"
    >
      <zk-table :prop-table-data="headerTotal.rejectList" :columns="tableColumns" :use-pagination="false" />
      <template #footer>
        <div class="flex-end">
          <el-button type="primary" @click="visible = false">关闭</el-button>
        </div>
      </template>
    </w-dialog>
  </div>
</template>
<script>
  import WLogo from "@/components/WLogo.vue"
  import api from "@/api/api"
  import ZkTable from '@/components/zk-table'
  import { goback } from "@/utils/index.js"
  import { mapGetters } from 'vuex'

  const qs = (o = {}) => {
    const arr = []
    Object.keys(o).forEach(key => {
      if (Object.prototype.hasOwnProperty.call(o, key) && (o[key] || o[key] === 0)) {
        arr.push(`${key}=${o[key]}`)
      }
    })
    return arr.join('&')
  }

  export default {
    components: {
      WLogo,
      ZkTable
    },
    data() {
      return {
        visible: false,
        tableData: [],
        tableColumns: [
          { key: 'project_name', label: '项目名称' },
          { key: 'work_name', label: '工作名称' },
          { key: 'task_name', label: '任务名称' },
          { key: 'sp_person_name', label: '审批人' },
          { key: 'sp_dept_name', label: '审批人部门' },
          { key: 'done_time', label: '审批时间' },
          { key: 'sp_state', label: '审批结果', storeKey: 'approvalState' },
        ]
      }
    },
    computed: {
      username() {
        return this.$store.state.userInfo["real_name"]
      },
      ...mapGetters(['headerTotal']),
      totals(){
        return [
          {
            value: this.headerTotal.approvalTotal,
            message: '待审批任务',
            icon: 'el-icon-message',
            onClick: () => this.routerTo('task-approval', { sp_state: '0' }),
          },
          {
            value: this.headerTotal.rejectTotal,
            message: '被驳回任务',
            icon: 'el-icon-link',
            list: this.headerTotal.rejectList,
            onClick: () => this.visible = true
          },
          {
            value: this.headerTotal.supervisionTotal,
            message: '未处理督办提醒',
            icon: 'el-icon-warning-outline',
            onClick: () => this.routerTo('task-supervisor-reminder')
          },
          {
            value: this.headerTotal.warningTotal,
            message: '未处理超时预警',
            icon: 'el-icon-message-solid',
            onClick: () => this.routerTo('task-timeout-warning', { finish_state: '01' })
          },
        ]
      }
    },
    created() {
      this.$store.dispatch('getHeaderTotals')
    },
    methods: {
      //退出
      logout() {
        this.$store.commit("logout")
        goback()
      },
      routerTo(path, query = {}) {
        const q = qs(query)
        this.$router.push(`/${path}?${q}`)
      },
    }
  }
</script>
<style lang="scss" scoped>
  @import "~@/assets/css/_variables.scss";

  .header-box {
    height: 100%;
  }

  .right-box {
    $h: 40px;
    @include flex-start();
    width: 500px;
    height: 100%;
    font-size: 14px;
    color: #333;

    i {
      filter: invert(10%);

      &:hover {
        filter: invert(0);
      }
    }

    .total-container {
      margin-right: 30px;
      display: flex;

      .item {
        margin-left: 16px;
        position: relative;
        z-index: 2;

        .has-total {
          background: white;
          color: red;
          animation: fade 1s linear infinite;
        }
      }
    }

    .over-layer {
      background: white;
      border-radius: 50%;
    }

    .space-container {
      cursor: pointer;
    }

    .spread {
      $color: rgba(250, 169, 16, 1);
      border-radius: 50%;
      position: absolute;
      width: $h/2;
      height: $h/2;
      left: $h/4;
      top: $h/4;

      &.spread-wrapper {
        animation: animation-scale 2s 0s linear both infinite;
        box-shadow: 0 0 6 $color inset;
      }

      &.spread-inner {
        animation: animation-scale 2s 1s linear both infinite;
        box-shadow: 0 0 6px $color inset;
      }

      &.spread-inner-1 {
        animation: animation-scale 2s 2s linear both infinite;
        box-shadow: 0 0 6px $color inset;
      }
    }

    @-webkit-keyframes animation-scale {
      0% {
        transform: scale(0);
        opacity: 0
      }
      50% {
        transform: scale(1.4);
        opacity: 1
      }
      100% {
        transform: scale(2.4);
        opacity: 0
      }
    }
    @keyframes fade {
      from {
        opacity: 1.0;
      }
      50% {
        opacity: 0.4;
      }
      to {
        opacity: 1.0;
      }
    }

    .img-box {
      // margin-right: 30px;
      position: relative;
      border-radius: 50%;
      background-color: #f5f6fa;
      color: #bdbdbd;
      width: $h;
      height: $h;
      font-size: 21px;
      cursor: pointer;
      overflow: hidden;
      text-align: center;
      line-height: $h;
    }

    .txt-exit {
      margin-right: 10px;
      border-left: 1px solid #575e68;
      padding-left: 20px;
      width: 74px;
      font-size: 14px;
      color: #575e68;
      background-image: url("~@/assets/images/icon2.png");
      background-repeat: no-repeat;
      background-size: 14px;
      background-position: right center;
      cursor: pointer;
    }
  }

  .center-box {
    width: 95%;
    height: auto;
  }
</style>
